<style lang="less">
  .charge-offs-list {
    .el-form--inline .el-form-item {
      margin-bottom: 10px;
      margin-right: 0px;
    }
  }
</style>
<template>
  <el-dialog  width="1200px" title="销账记录" :visible.sync="dialogVisible" class="charge-offs-list">
    <el-row>
      <search-bar>
        <el-form label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="销账日期">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  placeholder="">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="f-mb" label="银行户名">
                <el-input v-model="searchCondition.LIKE_accountName" class="f-w70"
                          placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="f-mb" label="银行卡号">
                <el-input v-model="searchCondition.LIKE_bankNum" class="f-w70"
                          placeholder=""></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="resetSearchCondition" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchTableList" style="float: right;margin-right: 10px">查询</el-button>
      </el-col>

      <el-table :data="tableData" border tooltip-effect="dark" style="width: 100% ;margin-top: 10px"
                @sort-change="sortChange" max-height="660"
                @selection-change="selsChange" v-loading="listLoading">
        <el-table-column type="index" width="60" align="center">
        </el-table-column>
        <el-table-column prop="chargeOffsTime"  label="销账时间" width="150" align="center">
        </el-table-column>
        <el-table-column prop="billingCycle"  label="账单周期" width="150" align="center">
        </el-table-column>
        <el-table-column prop="chargeOffsAmount"  label="销账金额" width="80" align="center">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="bankName"  label="到账银行" width="150" align="center">
        </el-table-column>
        <el-table-column prop="accountName"  label="银行户名" width="80" align="center">
        </el-table-column>
        <el-table-column prop="bankNum"  label="银行卡号" width="200" align="center">
        </el-table-column>
        <el-table-column prop="serialNum"  label="流水号" width="200" align="center">
        </el-table-column>
        <el-table-column prop="remark"  label="备注" min-width="100" header-align="center">
        </el-table-column>
        <el-table-column fixed="right" prop="transVoucherUrl"  label="交易凭证" width="100" align="center">
          <template slot-scope="scope">
            <el-button   type="primary" :disabled="scope.row.transVoucherUrl == null || scope.row.transVoucherUrl == ''" @click="$emit('viewImg',scope.row.headerUrl,scope.row.transVoucherUrl)">图片</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import {
  searchTruckBellwetherWriteOffList } from '../../../api/v3/TruckLoadProfit';
import { resetObjNull, objToFilter } from '../../../lib/util.js';

export default {
  name: 'ChargeOffsList',
  componentName: 'ChargeOffsList',
  props: {
    loadData: Function
  },
  data () {
    return {
      bellwetherId: null,
      dialogVisible: false,
      searchCondition: {
        'LIKE_accountName': null,
        'LIKE_bankNum': null,
        'GTE_chargeOffsTime': null,
        'LTE_chargeOffsTime': null
      },
      dateRange: [], // 日期范围
      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'descending',
      listLoading: false
    };
  },
  watch: {},
  methods: {
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchTableList();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    // 重置查询条件
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
      this.dateRange = [];
    },
    // 查询列表执行
    loadingLists (filter = '') {
      this.listLoading = true;
      searchTruckBellwetherWriteOffList({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage - 1,
        sort: 'createdDate,desc'
      }).then(res => {
        this.tableData = res.data;
        this.total = Number(res.headers['x-total-count']);
        this.listLoading = false;
      });
    },
    // 查询调用
    searchTableList () {
      let filters = objToFilter(this.searchCondition);
      if (this.dateRange[0]) {
        filters += ';GTE_chargeOffsTime=' + this.dateRange[0].toJSON();
        filters += ';LTE_chargeOffsTime=' + this.$ue.addDays(this.dateRange[1], 1).toJSON();
      }
      filters += ';EQ_truckBellwether.id=' + this.bellwetherId;
      this.loadingLists(filters);
    },
    show (bellwetherId) {
      this.dialogVisible = true;
      this.resetSearchCondition();
      this.bellwetherId = bellwetherId;
      this.searchTableList(bellwetherId);
    }
  },
  // 初始化数据
  mounted () {}
};
</script>
